<template>
    <div class="main-container">
        <img src="./assets/bg-platform.png" class="bg-platform" alt=""/>
        <div class="board">
            <img src="./assets/bg-car.png" class="bg" alt=""/>
            <img src="./assets/logo.svg" class="logo" alt=""/>
            <img src="./assets/logo-car.svg" class="logo-car" alt=""/>

            <div class="tab-toucher" style="top: 70px"></div>

            <template>
                <img class="steering-wheel" src="./assets/steering-wheel.png" alt=""/>
                <img
                        v-show="currentDirection"
                        :style="{transform: `rotate(${directionDegMap[currentDirection]}deg)`}"
                        class="steering-wheel-press"
                        src="./assets/steering-wheel-press.png"
                        alt=""
                />
                <div
                        v-for="(style,direction) of directionStyleMap"
                        :key="direction"
                        :style="style"
                        class="direction-toucher"
                        @mousedown="wheelMouseDown(direction)"
                        @mouseleave="wheelMouseLeave(direction)"
                        @mouseup="wheelMouseUp"
                ></div>
            </template>
        </div>
    </div>
</template>

<script>
    const arrowMap = {
        ArrowDown: 'backward',
        ArrowUp: 'forward',
        ArrowLeft: 'left',
        ArrowRight: 'right'
    };
    const arrowCodes = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];

    export default {
        name: 'APP',
        data: () => ({
            currentDirection: null,
            directionStyleMap: {
                forward: 'left: 203px; top: 80px; transform: scaleX(1.7)',
                left: 'left: 122px; top: 163px; transform: scaleY(1.7)',
                right: 'left: 286px; top: 163px; transform: scaleY(1.7)',
                backward: 'left: 203px; top: 243px; transform: scaleX(1.7)',
            },
            directionDegMap: {
                forward: -90,
                left: 180,
                right: 0,
                backward: 90,
            }
        }),
        created() {
            const sp = new URLSearchParams(location.search);
            this.token = sp.get('token');
            window.addEventListener('keydown', this.onkeydown);
            window.addEventListener('keyup', this.onkeyup);
        },
        beforeDestroy() {
            window.removeEventListener('keydown', this.onkeydown);
            window.removeEventListener('keyup', this.onkeyup);
        },
        methods: {
            onkeydown(e) {
                if (arrowCodes.includes(e.code)) {
                    if (arrowMap[e.code] === this.currentDirection) return;
                    this.wheelMouseDown(arrowMap[e.code]);
                }
            },
            onkeyup() {
                this.wheelMouseUp();
            },
            wheelMouseDown(direction) {
                this.currentDirection = direction;
                this.controlCar(direction);
            },
            wheelMouseLeave(direction) {
                if (direction === this.currentDirection) {
                    this.wheelMouseUp();
                }
            },
            wheelMouseUp() {
                this.currentDirection = null;
                this.controlCar('stop');
            },
            controlCar(cmd) {
                if (!this.token) return;
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange = () => {
                    console.log(xhr);
                };
                xhr.open('post', '/api/app/device-car/car/invokeService', true);
                xhr.setRequestHeader('Content-type', 'application/json');
                xhr.setRequestHeader('token', this.token);
                xhr.send(JSON.stringify({
                    devId: 'smartCar',
                    identifier: 'ctrl',
                    inputParams: {cmd},
                    async: true
                }));
            }
        }
    };
</script>

<style>
    html, body {
        margin: 0;
    }
    img {
        -webkit-user-drag: none;
    }
    .main-container {
        background-image: url('./assets/bg-highlight.png');
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 100vh;
    }
    .board {
        width: 867px;
        height: 375px;
        background: #000000;
        border-radius: 20px;
        position: relative;
    }
    .logo {
        position: absolute;
        left: 8px;
        top: 16px;
    }
    .logo-car {
        position: absolute;
        left: 18px;
        top: 93px
    }
    .steering-wheel {
        width: 240px;
        height: 240px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 110px;
    }
    .steering-wheel-press {
        position: absolute;
        width: 78px;
        left: 264px;
        top: 106px;
        transform-origin: -37px center;
        transition: 0.3s;
    }
    .bg-platform {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        min-width: 1129px;
    }
    .bg {
        position: absolute;
        right: 4px;
        top: 4px;
        height: 367px;
    }
    .tab-toucher {
        position: absolute;
        background-color: transparent;
        width: 45px;
        height: 75px;
        left: 10px;
        cursor: pointer;
    }
    .direction-toucher {
        position: absolute;
        background-color: transparent;
        width: 50px;
        height: 50px;
        cursor: pointer;
        user-select: none;
    }
</style>
